<script setup>
import { ref ,onMounted, reactive } from 'vue'

// 响应式状态
const count = ref(0)

// reactive() 将使对象本身具有响应性
const state = reactive({ count: 0 })

// 深层嵌套的对象,Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时，变化也会被检测到
const obj = ref({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})

// 用来修改状态、触发更新的函数
function increment() {
    count.value++
}

function mutateDeeply() {
  // 以下都会按照期望工作
  obj.value.nested.count++
  obj.value.arr.push('baz')
}

// 生命周期钩子
onMounted(() => {
    console.log(`The initial count is ${count.value}.`)
    console.log(count) // { value: 0 }
    console.log(count.value) // 0
    count.value++
    console.log(count.value) 
})
</script>

<template>
    <button @click="increment">Count is: {{ count }}</button>
    <p>{{ obj }}</p>
    <div>
        <button @click="mutateDeeply">深层响应性</button>
    </div>
    <p>
        <button @click="state.count++">
            {{ state.count }}
        </button>
    </p>
</template>